<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/layout/layout_nav_footer.xhtml">
	<ui:define name="titre">
		<p:graphicImage value="/img/recettes.png" />
	</ui:define>
	<ui:define name="content">
		<div>
			<div class="cookCar">
				<ul>
					<li><p:graphicImage value="#{searchRecipe.imgNbOfPerson}" /> 
					<h:outputText value="#{searchRecipe.selectedRecipe.nbPersons} " />personnes</li>

					<li><h:form><p:graphicImage value="#{searchRecipe.imgCookExpertise}" />
						<p:rating value="#{searchRecipe.selectedRecipe.cookExpertise}" readonly="true" /></h:form></li>

					<li><p:graphicImage value="#{searchRecipe.imgPreparationDuration}" /> 
					<h:outputText value="#{searchRecipe.selectedRecipe.preparationDuration} " /> mn</li>

					<li><p:graphicImage value="#{searchRecipe.imgCookType}" /> 
					<h:outputText value="#{searchRecipe.selectedRecipe.cookType}" /></li>
				</ul>
			</div>
			<div class="cookSum">
				<h1>
					<h:outputText value="#{rec.title}" />
					<h:form style="display: inline-block;position:relative;top:-5px">
						<h:commandButton value="Retour" type="submit" styleClass="btn btn-primary" action="#{searchRecipe.search}" />
					</h:form>
				</h1>
				<p><strong>Résumé :</strong><h:outputText value=" #{searchRecipe.selectedRecipe.sumUp}" /></p>
			</div>
			<div class="cookDetails">
				<p>
					<p:graphicImage value="/img/#{searchRecipe.selectedRecipe.imageRef}.png" style="float:right;" />
					<h:outputText value="#{searchRecipe.selectedRecipe.description}" />
				</p>
			</div>
			<div style="clear:both"></div>
		</div>
		
		<hr style="width: 80%" />
		
		<div>
			<h:form id="recipeComments">
				<p:panelGrid style="border:none;margin:0 auto;">
					<c:forEach var="c" items="#{searchRecipe.selectedRecipeComments}">
						<p:row>
							<p:column>
								<p:graphicImage value="/img/#{c.user.img}.png" style="display:block"/>
								<h:outputText value="#{c.user.firstName} #{c.user.lastName}"/>
							</p:column>
							<p:column style="font-size:12px;">
								<h:outputText value="#{c.user.lastConnection}">
									<f:convertDateTime type="date" pattern="dd-MM-yyyy hh:mm"/>
								</h:outputText>
							</p:column>
							<p:column><h:outputText value="#{c.txt}"/></p:column>
							<p:column><h:form><p:rating value="#{c.rating}" readonly="true" /></h:form></p:column>
						</p:row>
					</c:forEach>
					<p:row colspan="4">
						<p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">  
						    <f:facet name="start">  
						        <h:graphicImage value="../design/ajaxloading.gif" style="margin: 0 auto"/>  
						    </f:facet>
						</p:ajaxStatus>
						<h:message />
					</p:row>	
					<p:row rendered="#{loginbean.logged == true}">
						<p:column>
							<p:graphicImage value="/img/#{loginbean.user.img}.png" style="display:block"/>
							<h:outputText value="#{loginbean.user.firstName} #{loginbean.user.lastName}"/>
						</p:column>
						<p:column></p:column>
						<p:column>
							<p:inputTextarea id="comment" rows="5" cols="70" value="#{commentManager.newComment.txt}" required="true" >
								<f:validateLength maximum="150" /> 
							</p:inputTextarea><br />
							<p:message for="comment" /> 
							<p:commandButton value="Envoyer mon commentaire" type="submit" styleClass="btn" action="#{commentManager.saveComment}" update="recipeComments">
								<f:setPropertyActionListener target="#{commentManager.newComment.user}" value="#{loginbean.user}" />
								<f:setPropertyActionListener target="#{commentManager.newComment.recipe}" value="#{searchRecipe.selectedRecipe}" />
							</p:commandButton>
						</p:column>
						<p:column><p:rating value="#{commentManager.newComment.rating}" cancel="true" required="true"/></p:column>
					</p:row>
				</p:panelGrid>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
